<template>
  <el-tabs v-model="activeName" class="app-container">
    <el-tab-pane label="用户信息" name="info" lazy>
      <UserDetailForm :userId="userId" />
    </el-tab-pane>

    <el-tab-pane label="户型图" name="house" lazy>
      <UserDetailHouse :userId="userId" />
    </el-tab-pane>

    <el-tab-pane label="所有设备" name="devices" lazy>
      <UserDetailDevices :userId="userId" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import UserDetailForm from "./UserDetailForm.vue";
import UserDetailHouse from "./UserDetailHouse.vue";
import UserDetailDevices from "./UserDetailDevices.vue";

defineOptions({
  name: "UserDetail",
});

const route = useRoute();
const activeName = ref<string>("house");

const userId = computed(() => {
  return (route.query.id as string) || undefined;
});
</script>

<style lang="scss" scoped>
:deep(.avue-form__row.identity-feature) {
  .el-form-item__content {
    padding: 20px 30px;
  }
}

:deep(.avue-form__row.renovation-items) {
  .el-form-item__content {
    padding: 20px 30px;
  }
}
</style>
